<template>
    <div>
        <page-header title="G2plot" content="G2Plot 是开箱即用、易于配置、具有良好视觉和交互体验的通用统计图表库">
            <el-button-group>
                <el-button icon="el-icon-link" @click="open('https://g2.antv.vision/zh')">G2 官网</el-button>
                <el-button icon="el-icon-link" @click="open('https://g2plot.antv.vision/zh')">G2plot 官网</el-button>
            </el-button-group>
        </page-header>
        <page-main>
            由于 G2 的高度可定置化，导致不同开发者开发出来的图表效果有的好看，有的不好看，G2Plot 解决了这一问题，由官方制定了一套标准设计规范，开发者可以专注于数据，而不用关心最终呈现，当然缺点也很明显，就是自定义上不如 G2 ，所以如果你有更复杂的需求，推荐还是使用 G2 去自行实现。
        </page-main>
        <el-row :gutter="20" style="margin: -10px 10px;">
            <el-col :md="12">
                <page-main title="柱状图" style="margin: 10px 0;">
                    <div id="chart1" style="width: 100%; height: 400px;" />
                </page-main>
            </el-col>
            <el-col :md="12">
                <page-main title="折线图" style="margin: 10px 0;">
                    <div id="chart2" style="width: 100%; height: 400px;" />
                </page-main>
            </el-col>
        </el-row>
        <el-row :gutter="20" style="margin: 0 10px;">
            <el-col :md="12">
                <page-main title="饼图" style="margin: 10px 0;">
                    <div id="chart3" style="width: 100%; height: 400px;" />
                </page-main>
            </el-col>
            <el-col :md="12">
                <page-main title="雷达图" style="margin: 10px 0;">
                    <div id="chart4" style="width: 100%; height: 400px;" />
                </page-main>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { Column, Line, Pie, Radar } from '@antv/g2plot'

export default {
    mounted() {
        this.initChart1()
        this.initChart2()
        this.initChart3()
        this.initChart4()
    },
    methods: {
        initChart1() {
            const data = [
                { type: '分类一', values: [76, 100] },
                { type: '分类二', values: [56, 108] },
                { type: '分类三', values: [38, 129] },
                { type: '分类四', values: [58, 155] },
                { type: '分类五', values: [45, 120] },
                { type: '分类六', values: [23, 99] },
                { type: '分类七', values: [18, 56] },
                { type: '分类八', values: [18, 34] }
            ]
            const barPlot = new Column('chart1', {
                data,
                xField: 'type',
                yField: 'values',
                color: 'l(90) 0:#3e5bdb 1:#b4d9e4',
                isRange: true,
                columnStyle: {
                    fillOpacity: 0.8
                },
                label: {
                    position: 'middle',
                    style: {
                        fill: '#fff'
                    }
                }
            })
            barPlot.render()
        },
        initChart2() {
            fetch('https://gw.alipayobjects.com/os/bmw-prod/e00d52f4-2fa6-47ee-a0d7-105dd95bde20.json')
                .then(res => res.json())
                .then(data => {
                    const linePlot = new Line('chart2', {
                        data,
                        xField: 'year',
                        yField: 'gdp',
                        seriesField: 'name',
                        yAxis: {
                            label: {
                                formatter: v => `${(v / 10e8).toFixed(1)} B`
                            }
                        },
                        legend: {
                            position: 'top'
                        },
                        smooth: true,
                        // @TODO 后续会换一种动画方式
                        animation: {
                            appear: {
                                animation: 'path-in',
                                duration: 5000
                            }
                        }
                    })
                    linePlot.render()
                })
        },
        initChart3() {
            const data = [
                { type: '分类一', value: 27 },
                { type: '分类二', value: 25 },
                { type: '分类三', value: 18 },
                { type: '分类四', value: 15 },
                { type: '分类五', value: 10 },
                { type: '其他', value: 5 }
            ]
            const piePlot = new Pie('chart3', {
                appendPadding: 10,
                data,
                angleField: 'value',
                colorField: 'type',
                radius: 0.8,
                label: {
                    type: 'outer',
                    content: '{name} {percentage}'
                },
                interactions: [{ type: 'pie-legend-active' }]
            })
            piePlot.render()
        },
        initChart4() {
            fetch('https://gw.alipayobjects.com/os/bmw-prod/5c41aa9b-9c8a-425f-9f4d-934b889bb75d.json')
                .then(data => data.json())
                .then(data => {
                    const radarPlot = new Radar('chart4', {
                        data,
                        xField: 'item',
                        yField: 'score',
                        seriesField: 'user',
                        xAxis: {
                            label: {
                                offset: 15
                            },
                            grid: {
                                line: {
                                    type: 'line'
                                }
                            }
                        },
                        yAxis: {
                            grid: {
                                line: {
                                    type: 'circle'
                                }
                            }
                        },
                        point: {
                            shape: 'circle'
                        },
                        // 开启面积
                        area: {},
                        legend: {
                            position: 'bottom'
                        }
                    })
                    radarPlot.render()
                })
        },
        open(url) {
            window.open(url, 'top')
        }
    }
}
</script>
